<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})"></head>
<style>
    .layui-table-tool-temp {
        padding: 0 !important;
    }
</style>
<body>
<div class="layui-fluid">
    <table id="service_type-table" lay-filter="service_type-table"></table>
</div>
<!-- 工具栏 -->
<script type="text/html" id="toolbarServiceType">
    <div class="layui-btn-container" style="display: flex;justify-content: flex-end;">
        <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-circle"></i>添加</button>
<!--        <button shiro:hasPermission="service:type:batchRemove" class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchRemove"><i class="layui-icon layui-icon-delete"></i>删除</button>-->
    </div>
</script>
<!-- 操作列 -->
<script type="text/html" id="service_type-state">
    <div class="layui-btn-group">
        <button shiro:hasPermission="service:type:edit" class="layui-btn layui-btn-sm" lay-event="edit">编辑</button>
<!--        <button shiro:hasPermission="service:type:remove" class="layui-btn layui-btn-sm" lay-event="del">删除</button>-->
    </div>
</script>
<script th:replace="/common/template :: script"></script>
<script>
    var active;

    layui.use([ 'table' ], function() {
        var $ = layui.jquery;
        var table = layui.table;
        // 渲染表格
        var renderTable = function() {
            layer.load(2);
            table.render({
                elem : '#service_type-table',
                url : '/service/type/list',
                toolbar : '#toolbarServiceType',
                defaultToolbar: [],
                page : true,
                id : 'serviceTypeReload',
                parseData:chaoLayuiTable.parseData,
                request:chaoLayuiTable.request,
                response:chaoLayuiTable.response,
                //limit : 1,
                cols : [ [ {
                    type : 'checkbox',
                    fixed : 'left'
                },
                    {
                        width : 80,
                        type: 'numbers',
                        align : 'center',
                        title : '序号',
                    },
                    {
                        align : 'center',
                        field : 'serviceTypeName',
                        title : '服务类型名称',

                    },
                    {
                        align : 'center',
                        field : 'isShopAvailable',
                        title : '是否汽车行业',
                        templet: function(d){
                            return d.isShopAvailable==1?"是":"否";
                        }
                    },
                    {
                        title : '操作',
                        toolbar : '#service_type-state',
                        align : 'center'
                    } ] ],
                done : function() {
                    layer.closeAll('loading');
                }
            });

        };
        renderTable();
        // 搜索
        active = {
            reload : function() {
                //执行重载
                table.reload('serviceTypeReload', {
                    page : {
                        curr : 1
                        //重新从第 1 页开始
                    },
                    where : {

                    }
                });
            }
        };

        $('#search').on('click', function() {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //头工具栏事件
        table.on('toolbar(service_type-table)', function(obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'add'://增加
                    openAdd();
                    break;
/*                case 'batchRemove'://批量删除
                    var data = checkStatus.data;
                    if (data.length < 1) {
                        layer.msg('请至少选择一个');
                        break;
                    }
                    //批量删除
                    batchRemove(data);*/
            }
        });

        //监听工具条
        table.on('tool(service_type-table)', function(obj) {
            var data = obj.data;
            var layEvent = obj.event;
            if (layEvent === 'del') {//删除
                remove(data.serviceTypeId);
            } else if (layEvent === 'edit') {//修改
                edit(data.serviceTypeId);
            }
        });

/*        function remove(id) {
            parent.layer.confirm('确定要删除选中的记录？', {
                btn : [ '确定', '取消' ]
            }, function() {
                //删除
                CoreUtil.ajaxPostLoad('/service/type/remove', {
                    serviceTypeId : id
                },true,active);
            })
        }

        function batchRemove(data) {
            parent.layer.confirm("确认要删除选中的'" + data.length + "'条数据吗?", {
                btn : [ '确定', '取消' ]
            }, function() {
                var ids = new Array();
                $.each(data, function(i, row) {
                    ids[i] = row['serviceTypeId'];
                });
                console.log("remove->ids:" + ids);
                //批量删除
                CoreUtil.ajaxPostLoad('/service/type/batchRemove', {
                    serviceTypeIds : ids
                },true,active);
            });
        }*/

        function edit(id) {
            layer.open({
                type : 2,
                title : '修改',
                maxmin : true,
                shadeClose : false, // 点击遮罩关闭层
                area : [ '35%', '35%' ],
                content : '/service/type/edit/' + id // iframe的url
            });
        }

        function openAdd() {
            layer.open({
                type : 2,
                title : '增加',
                maxmin : true,
                shadeClose : false, // 点击遮罩关闭层
                area : [ '35%', '35%' ],
                content : '/service/type/add' // iframe的url
            });
        }
    });
</script>
</body>
</html>